<template>
  <Head title="终端统计" isBack>
    <template #content>
      <Table
        ref="tableRef"
        :columns="data.columns"
        :toolbar="data.toolbar"
        :query="data.query"
        @get-list="getData"
      >
      </Table>
    </template>
  </Head>
</template>

<script lang="ts" setup name="terminalStatistics">
import Head from '@/components/head/index.vue';
import Table from '@/components/table/index.vue';
import moment from 'moment';
import { queryDicByParent } from '@/service/apis/api';
import {
  pagingConnectorTotalInfo,
  EXPORT_CONNECTORTOTALINFO,
} from '@/service/apis/statistical';
import { exportFile } from '@/utils/utils';

const route = useRoute();
const {
  query: { id, stationName, startTime, endTime },
} = route;

const tableRef = ref();
const data = reactive({
  detailData: {} as any,
  id: '' as any,
  startTime: '' as any,
  endTime: '' as any,
  columns: [
    {
      prop: 'connectorCode',
      label: '终端编码',
      width: 160,
    },
    {
      prop: 'stationName',
      label: '归属电站',
      width: 160,
    },
    {
      prop: 'operatorName',
      label: '归属运营商',
      width: 160,
    },
    {
      prop: 'channelName',
      label: '平台运营商',
      width: 160,
    },
    {
      prop: 'totalPower',
      label: '电量（度）',
      width: 120,
      dataNum: 4,
    },
    {
      prop: 'chargedTime',
      label: '充电时长（小时）',
      width: 140,
      // dataNum: 4,
    },
    {
      prop: 'count',
      label: '充电次数（次）',
      width: 140,
      dataType: String,
    },
    {
      prop: 'totalElecMoney',
      label: '电费（元）',
      width: 120,
      dataNum: 4,
      askContent: '电费单价*电量，计算所得订单电费',
    },
    {
      prop: 'totalServiceMoney',
      label: '服务费（元）',
      width: 120,
      dataNum: 4,
      askContent: '服务费单价*电量，计算所得订单服务费',
    },
    {
      prop: 'totalAmount',
      label: '订单总金额（元）',
      width: 150,
      dataNum: 4,
      askContent: '电费+服务费',
    },
    {
      prop: 'actualAmount',
      label: '用户实付（元）',
      width: 140,
      dataNum: 2,
      askContent: '单笔订单用户实际支付金额，即订单总金额-平台所有优惠',
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'powerStationStatisticsList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        exportFile(
          EXPORT_CONNECTORTOTALINFO,
          '终端统计',
          tableRef.value?.getForm()
        );
      },
    },
    {
      label: '电站名称',
      text: true,
      value: stationName,
    },
  ],
  query: [
    {
      label: '统计时间',
      prop: 'data',
      comName: 'date',
      keys: ['startTime', 'endTime'],
      props: {
        type: 'daterange',
      },
    },
    {
      label: '终端编码',
      prop: 'connectorCode',
      comName: 'input',
      props: {
        placeholder: '请输入终端编码',
      },
    },
  ],
});

const getData = (page: any, search: any) => {
  let form: any = search.ruleForm;
  if (!form.data) {
    form.data = [
      data.startTime ? data.startTime : startTime,
      data.endTime ? data.endTime : endTime,
    ];
  }
  if (form.data && form.data.length > 0) {
    form.startTime = form.data[0];
    form.endTime = form.data[1];
  } else {
    form.startTime = '';
    form.endTime = '';
  }
  form.connectorGroup = 1;
  form.stationId = data.id ? data.id : id;
  pagingConnectorTotalInfo(form, page).then((res: any) => {
    if (res) {
      if (page.pageNo !== 1 && (!res.dataList || res.dataList?.length === 0)) {
        page.pageNo--;
        getData(page, search);
        return;
      }
      nextTick(() => {
        tableRef.value.setTable({
          total: res.totalCount,
          table: res.dataList,
        });
      });
    }
  });
};
</script>
<style lang="scss" scoped>
@import '@/assets/styles/head.scss';
.card {
  padding: 30px 0;
  margin: 20px 0;
  .card-content {
    width: 100%;
    .card-data {
      .card-item {
        display: flex;
        text-align: left;
        .title {
          margin-left: 12px;
        }
        .iconfont {
          font-size: 56px;
        }
      }
    }
  }
}
</style>